/**
 * @desc 商品分组
 * @author yd_zhaorongjun
 */
<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="5" :lg="3">
          <p>商品分组名称</p>
          <el-input v-model="Api_GET_MallProductGroupQO.Filter" placeholder="请输入" size="mini" clearable @change="refreshList()" />
        </el-col>
        <el-col :md="19" :lg="21" :xl="21" style="text-align:right">
          <!-- 查询按钮 -->
          <el-button style="margin-top:27px" type="primary" size="mini" @click="refreshList()">{{ $t('button.query') }}</el-button>
          <!-- 重置按钮 -->
          <el-button style="margin-top:27px" type="warning" size="mini" @click="refreshSearchForm">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <template>
      <el-row style="margin:15px 0 8px 0">
        <el-col :md="6" :lg="4">
          <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="editOfAdd()">添加组别</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="tableData" class="gl_table_noBorder" size="mini" style="width: 100%;">
        <el-table-column
          label="商品分组名称"
          width="280"
        >
          <template slot-scope="{row}">
            {{ row.name || '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="描述"
          min-width="200"
        >
          <template slot-scope="{row}">
            {{ row.description || '--' }}
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column
          label="创建时间"
          width="160"
        >
          <template slot-scope="{row}">
            <span v-if="row.creationTime">
              {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" width="180">
          <template slot-scope="{row, $index}">
            <el-button size="mini" type="text" @click="editOfAdd(row, 'edit')">编辑</el-button>
            <el-button size="mini" type="text" style="color:#FF3434" @click="clickDelete(row)">删除</el-button>
            <template>
              <i class="preview_bottom el-icon-bottom gl_ml_10 gl_mr_10" :class="$index !== tableData.length - 1 ? '' : 'disable_move'" @click="setSortOrder(row, $index, 'down')" />
              <i class="preview_top el-icon-top gl_mr_10 " :class="$index !== 0 ? '' : 'disable_move'" @click="setSortOrder(row, $index, 'up')" />
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="gl_pt_20" style="text-align: right;">
        <el-pagination
          :current-page="Api_GET_MallProductGroupQO.Page"
          :page-size="Api_GET_MallProductGroupQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </template>
    <edit-group ref="editGroup" :store-id="storeId" @insert="groupInsert" @update="groupUpdate" />
  </div>
</template>

<script>
import { translateByCode } from '@/lib/getTransData';
import editGroup from './editGroup';
// import { CopyData } from '@/lib';
import {
  Api_GET_MallProductGroupQO
} from '@/lib/form/shoppingmall/swaggerForm';
import {
  api_GET_MallStoreCurrent,
  api_GET_MallProductGroup,
  api_POST_MallProductGroup,
  api_PUT_MallProductGroupId,
  api_DELETE_MallProductGroupId,
  api_PUT_MallProductGroupIdSortOrder
} from '@/extend/api/shoppingmallswaggerApi/app.js';
export default {
  components: {
    editGroup
  },
  data() {
    return {
      Api_GET_MallProductGroupQO: new Api_GET_MallProductGroupQO(),
      tableLoading: false,
      totalPage: 0,
      tableData: [],
      rowId: '', //
      tableRow: {}, //
      currentPage: 1,
      storeId: ''
    };
  },
  watch: {
    'storeId': {
      handler: function(val) {
        if (!val) return;
        this.refreshList();
      }
    }
  },
  created() {
    this.api_GET_MallStoreCurrent();
  },
  methods: {
    // 获取当前用户店铺信息
    api_GET_MallStoreCurrent() {
      api_GET_MallStoreCurrent({ IncludeStatus: true }).then(res => {
        this.storeId = res.id || '';
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 刷新列表
    refreshList(page) {
      this.tableLoading = true;
      this.Api_GET_MallProductGroupQO.Page = page || 1;
      this.Api_GET_MallProductGroupQO.SkipCount = (this.Api_GET_MallProductGroupQO.Page - 1) * this.Api_GET_MallProductGroupQO.MaxResultCount;
      this.Api_GET_MallProductGroupQO.StoreId = this.storeId;
      api_GET_MallProductGroup(this.Api_GET_MallProductGroupQO).then(res => {
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 重置搜索表单
    refreshSearchForm() {
      this.Api_GET_MallProductGroupQO = new Api_GET_MallProductGroupQO();
      this.refreshList();
    },
    // 添加或修改组别
    editOfAdd(row, type) {
      this.rowId = row ? row.id : '';
      this.$refs.editGroup.open(row, type);
    },
    // 添加组别
    groupInsert(data) {
      const _this = this;
      api_POST_MallProductGroup(data).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.addSuccessfully'),
          type: 'success'
        });
        _this.$refs.editGroup.dialogVisible = false;
        _this.$refs.editGroup.submitLoading = false;
        _this.refreshList(this.Api_GET_MallProductGroupQO.Page);
      }, error => {
        _this.$refs.editGroup.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 修改组别
    groupUpdate(data) {
      const _this = this;
      api_PUT_MallProductGroupId(this.rowId, data).then(res => {
        this.$message({
          // 添加成功！
          message: '修改成功！',
          type: 'success'
        });
        _this.$refs.editGroup.dialogVisible = false;
        _this.$refs.editGroup.submitLoading = false;
        _this.refreshList(this.Api_GET_MallProductGroupQO.Page);
      }, error => {
        _this.$refs.editGroup.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 删除按钮
    clickDelete(row) {
      const _this = this;
      const _confirmStr = ` ${translateByCode('alert.wantDelete')} [ ${row.name} ] ${translateByCode('alert.ma')}`;
      this.$confirm(_confirmStr, translateByCode('alert.warning'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        api_DELETE_MallProductGroupId(row.id).then(res => {
          this.$message({
            type: 'success',
            // 删除成功！
            message: translateByCode('alert.deleteSuccessfully')
          });
          _this.refreshList(this.Api_GET_MallProductGroupQO.Page);
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    // 更新商品排序
    setSortOrder(row, index, type) {
      const _this = this;
      this.tableLoading = true;
      api_PUT_MallProductGroupIdSortOrder(row.id, { offset: type === 'up' ? -1 : 1 }).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.addSuccessfully'),
          type: 'success'
        });
        _this.refreshList(this.Api_GET_MallProductGroupQO.Page);
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.tableLoading = false;
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_MallProductGroupQO.MaxResultCount = MaxResultCount;
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    }
  }
};
</script>
<style lang="scss" scoped>
.preview_close,
.preview_top,
.preview_bottom {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
  color: rgba(0,0,0,0.65);;
}

.preview_close:hover,
.preview_top:hover,
.preview_bottom:hover {
  color: #5CBDFF;
}
.disable_move {
  color: #C0C4CC;
  cursor: not-allowed;
}
</style>
